<template>
  <!--
   本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2588
   uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
   uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
   unicloud-db 组件文档：https://uniapp.dcloud.io/uniCloud/unicloud-db
   DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
   -->
  <view>
    <!-- 刷新页面后的顶部提示框 -->
    <view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条最新新闻动态</view>

    <!-- 基于 uni-list 的页面布局 -->
    <uni-list>
      <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
      <uni-list-item direction="column" v-for="item in data" :key="item.id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.title">
        <!-- 通过header插槽定义列表的标题 -->
        <template v-slot:header>
          <view class="uni-title">{{item.title}}</view>
        </template>
        <!-- 通过body插槽定义列表内容显示 -->
        <template v-slot:body>
          <view class="uni-list-box">
            <view class="uni-content">
              <view class="uni-title-sub uni-ellipsis-2">{{item.excerpt}}</view>
              <view class="uni-note">{{item.user_name + ' '+item.last_modify_date}}</view>
            </view>
          </view>
        </template>
        <!-- 同步footer插槽定义列表底部的显示效果 -->
        <template v-slot:footer>
          <view class="uni-footer">
            <text class="uni-footer-text">评论</text>
            <text class="uni-footer-text">点赞</text>
            <text class="uni-footer-text">分享</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />

    <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // 数据表名
      collection: 'opendb-news-articles',
      // 查询字段，多个字段用 , 分割
      field: '_id,mode,avatar,title,user_name,excerpt,last_modify_date',
      formData: {
        status: 'loading' // 加载状态
      },
      data:[
        {"excerpt":123,"title":"titletitletitletitle","user_name":"chenchao","last_modify_date":"12:30","id":1},
        {"excerpt":123,"title":"titletitletitletitle","user_name":"chenchao","last_modify_date":"12:30","id":2},
        {"excerpt":123,"title":"titletitletitletitletitle","user_name":"chenchao","last_modify_date":"12:30","id":3},


      ],
      tipShow: false // 是否显示顶部提示框
    };
  },
  onLoad() {
    this.$u.api.order.list(this.model).then(res => {
      if(res.code == '200'){
        this.data = res.rows;
      }else{
        this.$u.toast(res.msg);
      }
    });
  },
  methods: {
    load(data, ended) {
      if (ended) {
        this.formData.status = 'noMore'
      }
    }
  },
  /**
   * 下拉刷新回调函数
   */
  onPullDownRefresh() {
    this.formData.status = 'more'
    this.$refs.udb.loadData({
      clear: true
    }, () => {
      this.tipShow = true
      clearTimeout(this.timer)
      this.timer = setTimeout(()=>{
        this.tipShow  = false
      },1000)
      uni.stopPullDownRefresh()
    })
  },
  /**
   * 上拉加载回调函数
   */
  onReachBottom() {
    this.$refs.udb.loadMore()
  },
  fabClick() {
    // 打开新增页面
    uni.navigateTo({
      url: './add',
      // events: {
      //   // 监听新增数据成功后, 刷新当前页面数据
      //   refreshData: () => {
      //     this.$refs.udb.loadData({
      //       clear: true
      //     })
      //   }
      // }
    })
  }
};
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
}

.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}

.content {
  width: 100%;
  display: flex;
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
